<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-03-13 18:07:33
 * @Description: 水资源、水安全考核
 * @FilePath: \hmcs_map\src\views\spone\detection\jxkh\szy_saq.vue
-->

<template>
    <div class="w-100" style="height: 100%">
      <div
        id="szy_saq"
        class="w-100"
        style="height: 100%; position: relative"
      >
       
    </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  let myChart: any;
  const props = defineProps({
    echartsData: {
      type: Array,
      default: () => [],
    },
  });
  let option = {
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}个",
        fontSize: 20,
        color: "#667A8E",
        fontFamily: "OPPOSans-Regular",
      },
      nameTextStyle: {
        color: "#DEDEDE",
        fontSize: 12,
        padding: 10,
      },
  
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed", 
          opacity: 0.2, 
        },
      },
    },
    xAxis: {
      type: "category",
      data: props.echartsData.map((item: any) => item.name),
      axisLabel: {
        fontSize: 20,
        color: "#667A8E",
      },
    },
    series: [
      {
        type: "bar",
        data: props.echartsData.map((item: any) => item.value), // 示例数值数据
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(3, 230, 254, 1)", // 顶部颜色 
            },
            {
              offset: 0.01,
              color: "rgba(3, 230, 254, 0)", // 接近底部的颜色
            },
            {
              offset: 1,
              color: "rgba(3, 230, 254, 1)", // 底部颜色，透明
            },
          ]),
        },
        barWidth: "60%", // 调整柱状图的宽度
      },
    ],
  };
  
  onMounted(() => {
     myChart = echarts.init(
      document.getElementById("szy_saq") as HTMLElement
    );
    myChart.setOption(option);
  });
  </script>
  
<style lang="less">

</style>
  